<template>
    <div class="detail-facility">
        <detail-section title="房屋设施" moreText="查看全部设施">
            <div class="facility-inner">
                <template v-for="(item,index) in facilityData.houseFacilitys">
                    <div class="item" v-if="facilityData.facilitySort.includes(index)">
                        <div class="left">
                            <img :src="item.icon" alt="">
                            <span class="text">{{ item.groupName }}</span>
                        </div>
                        <div class="right">
                            <template v-for="iten in item.facilitys.slice(0,4)">
                                <div class="iten">
                                    <i class="iten_icon icon"></i>
                                    <span class="text">{{ iten.name }}</span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </detail-section>
    </div>
</template>

<script setup>
    import detailSection from '@/components/detail-section/detail-section.vue';

    defineProps({
        facilityData:{
            type:Object,
            default:() => ({})
        }
    })
</script>


<style lang='less' scoped>
.facility-inner {
    padding: 14px;
    background-color: #f7f9fb;
    border-radius: 6px;
    .item {
        display: flex;
        align-items: center;
        margin: 16px 0;
        .left {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
                width: 28px;
                margin-bottom: 4px;
            }
            .text {
                font-size: 14px;
            }
        }
        .right {
            width: 70%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .iten {
                width: 50%;
                margin: 4px 0;
                .iten_icon {
                    background-image: url("@/assets/img/detail/icon_check.png");
                }
            }
        }
    }
}
</style>